/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'
import PropTypes from 'prop-types'
import { theme_app } from '../../utils/appTheme'

export default class HeaderDefault extends Component<{}> {
  constructor(props) {
    super(props)
    this.state = {
      cont: this.props.title
    }
    this.GoToBack = this.GoToBack.bind(this)
  }
  GoToBack() {
    this.props.backBtnOnPress ? this.props.backBtnOnPress() : null
  }

  //设置props值类型
  static propTypes = {
    leftBtnShow: PropTypes.bool
  }

  //初始化默认值
  static defaultProps = {
    //图片集合
    leftBtnShow: true,
    rightImg: require('./src/more.png')
  }
  render() {
    return (
      <View
        style={{
          borderBottomWidth: 1,
          borderBottomColor: '#efefef',
          width: screenWidth,
          paddingRight: 14,
          height: header_Height,
          backgroundColor: theme_app.header_color,
          justifyContent: 'space-between',
          flexDirection: 'row',
          alignItems: 'center',
          position: 'relative',
          paddingTop: statusbarHeight
        }}
      >
        <TouchableOpacity
          onPress={() => {
            this.GoToBack()
          }}
          style={{
            flexDirection: 'row',
            alignItems: 'center'
          }}
        >
          {this.props.leftBtnShow ? (
            <Image
              source={require('./src/left_Arrow.png')}
              style={{ width: 20, height: 20, resizeMode: 'cover' }}
            />
          ) : null}
          {this.props.leftBtnShow ? (
            <Text style={{ color: '#F63300', fontSize: 16, lineHeight: 30 }}>
              返回
            </Text>
          ) : (
            <View style={{ width: 40, height: 30 }} />
          )}
        </TouchableOpacity>
        <Text style={{ fontSize: 18, color: '#000' }}>{this.props.title}</Text>
        <TouchableOpacity
          onPress={() => {
            if (this.props.rihghtBtnOnPress) {
              this.props.rihghtBtnOnPress()
            }
          }}
        >
          {this.props.flag ? (
            <Image
              source={this.props.rightImg}
              style={{ width: 30, height: 30 }}
            />
          ) : (
            <Text
              style={{
                fontSize: 18,
                color: '#F63300',
                // marginRight: 10,
                width: 40
              }}
            >
              {this.props.rightRitle}
            </Text>
          )}
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
})
